<template>
  <div id="page-activity">
    <div class="page-head">
      <!--<a-select style="width: 20%" v-model="page_scene" @change="handleChange">-->
        <!--<a-select-option value="">-->
          <!--页面场景-->
        <!--</a-select-option>-->
        <!--<a-select-option value="1">-->
          <!--普通页面-->
        <!--</a-select-option>-->
        <!--<a-select-option value="2">-->
          <!--会员中心-->
        <!--</a-select-option>-->
      <!--</a-select>-->

      <a-select style="width: 25%;margin-left: 5%" v-model="page_sort" @change="handleChange">
        <a-select-option value="">
          页面类型
        </a-select-option>
        <a-select-option value="1">
          H5
        </a-select-option>
        <a-select-option value="2">
          微信小程序
        </a-select-option>
      </a-select>

      <a-input v-model.trim="page_name" style="width: 30%;margin-left: 5%" placeholder="请输入页面名称进行搜索">
        <a-icon slot="prefix" type="search"/>
      </a-input>

      <a-button type="primary" style="width: 10%;margin-left: 5%" @click="currentChange(1)">
        搜索
      </a-button>
    </div>
    <div class="page-content">
      <div class="content-head">
        <div class="left">
          页面总数: {{main_page_pagination.total}}
        </div>
        <div content="right">
          <a-button icon="plus" style="margin-right: 10px" @click="showModal">添加页面</a-button>
          <a-tooltip>
            <template slot="title">
              Tips: 同一类型仅允许设置一个门店默认首页，其他页面为自定义页面
            </template>
            <a-icon type="alert" style="color: #ff9b19;font-size: 18px;"/>
          </a-tooltip>
        </div>
      </div>

      <a-spin :spinning="loading">
        <!-- 主活动列表 -->
        <div class="main-page-list">

          <div class="table-box">
            <a-table :pagination="{
                          pageSize: main_page_pagination.pageSize,
                          current: main_page_pagination.current,
                          total: main_page_pagination.total,
                          showQuickJumper: true,
                          onChange: currentChange
                      }"
                     :columns="columns" :data-source="main_page_list" :rowKey="record => record.id" >
                <span slot="tags" class="type-box" slot-scope="tags, record"  @mouseenter="mouseenter(record.id)">
                  <a-tooltip v-show="record.page_type.includes('5')">
                    <template slot="title">
                      wap
                    </template>
                    <i style="color: #5f20fe" class="iconfont icon-ht_btn_wap"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('4')">
                    <template slot="title">
                      支付宝
                    </template>
                    <i style="color: #4184ff" class="iconfont icon-ht_btn_alipay"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('3')">
                    <template slot="title">
                      APP
                    </template>
                    <i style="color: #ffa800" class="iconfont icon-ht_btn_app"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('2')">
                    <template slot="title">
                      小程序
                    </template>
                    <i style="color: #00dfb9" class="iconfont icon-ht_btn_smallprogram"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('1')">
                    <template slot="title">
                      公众号
                    </template>
                    <i style="color: #29ba9c" class="iconfont icon-ht_btn_gongzhonghao"></i>
                  </a-tooltip>
                  <a-tooltip v-show="record.page_type.includes('0')">
                    <template slot="title">
                      其他页面
                    </template>
                    <i style="color: #ff3d38" class="iconfont icon-ht_btn_otherpage"></i>
                  </a-tooltip>
                  <a-popover>
                    <template slot="content">
                      <a-checkbox-group v-if="record.page_sort == 1" name="checkboxgroup" v-model="record.page_type" @change="onChange($event,record)" >
                        <a-checkbox value="1"> 公众号</a-checkbox><br/>
                        <a-checkbox value="3"> APP</a-checkbox><br/>
                        <a-checkbox value="4"> 支付宝</a-checkbox><br/>
                        <a-checkbox value="5"> wap</a-checkbox><br/>
                        <a-checkbox value="0"> 其他页面</a-checkbox>
                      </a-checkbox-group>
                      <a-checkbox-group v-if="record.page_sort == 2" name="checkboxgroup" v-model="record.page_type" @change="onChange($event,record)" >
                        <a-checkbox value="2"> 小程序</a-checkbox><br/>
                        <a-checkbox value="0"> 其他页面</a-checkbox>
                      </a-checkbox-group>
                    </template>
                    <div style="position: relative">
                      <a-icon v-show="mouse_hover_id == record.id" style="color: #29ba9c;cursor: pointer;font-size: 18px;margin-top: 3px;" type="form" />
                    </div>
                  </a-popover>
                </span>
              <span slot="action" class="edit-box" slot-scope="text, record">
                  <a-tooltip>
                    <template slot="title">
                      预览
                    </template>
                    <i class="iconfont icon-ht_operation_perview" @click.stop="previewIt(record.id)"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      编辑
                    </template>
                    <i class="iconfont icon-ht_operation_edit" @click.stop="toPage(record)"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      复制链接
                    </template>
                    <i class="iconfont icon-ht_operation_copyline"
                       v-clipboard:copy="`${record.page_sort == 2 ? '/packageG/newDiy/newDiy?page_id='+record.id + '&store_id='+ fun.getKey('store_id') : fun.getSiteRoot()+'/addons/yun_shop/?menu#/newDiy?page_id='+record.id+ '&store_id='+ fun.getKey('store_id') +'&i='+fun.getKeyByI()}`"
                       v-clipboard:success="copy"
                       v-clipboard:error="onError"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      复制页面
                    </template>
                    <i class="iconfont icon-ht_operation_copypage" @click.stop="copyIt(record.id)"></i>
                  </a-tooltip>
                  <a-tooltip>
                    <template slot="title">
                      删除
                    </template>
                    <i class="iconfont icon-ht_operation_delete" @click.stop="deleteIt(record.id)"></i>
                  </a-tooltip>
                </span>
            </a-table>
          </div>

          <!-- 主活动列表的分页 -->
          <!--<a-pagination-->
          <!--class="page-pagination"-->
          <!--showQuickJumper-->
          <!--:pageSize="main_page_pagination.pageSize"-->
          <!--:current="main_page_pagination.current"-->
          <!--:total="main_page_pagination.total"-->
          <!--@change="currentChange"/>-->
        </div>
      </a-spin>
    </div>

    <a-modal width="800px" v-model="previewVisible" title="预览" @ok="close">
      <div>
        <!-- 预览区域 -->
        <layout-preview :previewData="previewData" />
      </div>
    </a-modal>

    <a-modal v-model="visible" title="选择页面类型" @ok="handleOk">
      <div class="modal-box">
        <p class="modal-title">页面类型</p>
        <div class="page-type-box">
          <span :class="[current_page_sort === '1'?'active':'']" @click="choose('1')">H5(含公众号)</span>
          <span :class="[current_page_sort === '2'?'active':'']" @click="choose('2')">微信小程序</span>
        </div>
      </div>
      <!--<div class="modal-box" style="margin-top: 20px">-->
        <!--<p class="modal-title">页面场景</p>-->
        <!--<div class="page-type-box">-->
          <!--<span :class="[current_page_scene === '1'?'active':'']" @click="choose('1','page')">普通页面</span>-->
          <!--<span :class="[current_page_scene === '2'?'active':'']" @click="choose('2','page')">会员中心</span>-->
        <!--</div>-->
      <!--</div>-->
    </a-modal>

  </div>
</template>

<script>
	import layoutPreview from '../design/layout-preview/index.vue'; // 组件预览区域
	// 组件实例
	import Vdc from '@/core/vdc/vdc';
	const columns = [
		{
			title: 'ID',
			dataIndex: 'id',
			key: 'id',
		},
		{
			title: '上次修改时间',
			dataIndex: 'updated_at',
			key: 'updated_at',
		},
		{
			title: '页面名称',
			dataIndex: 'page_name',
			key: 'page_name',
		},
		// {
		// 	title: '页面场景',
		// 	dataIndex: 'page_scene_depict',
		// 	key: 'page_scene_depict',
		// },
		{
			title: '显示终端',
			dataIndex: 'page_sort_depict',
			key: 'page_sort_depict',
		},
		{
			title: '页面类型',
			dataIndex: 'page_type',
			key: 'page_type',
			scopedSlots: { customRender: 'tags' },
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: { customRender: 'action' },
			width: 250,
		},
	];

	export default {
		data() {
			return {
				columns: columns,
				page_name: '',
				page_sort: '',
				page_scene: '1',
				mouse_hover_id: '',
				visible: false,
				current_page_sort: '1',
				current_page_scene: '1',

				// 预览数据
				previewVisible: false,
				previewData: {},

				// 状态
				loading: false,
				// 主页列表
				main_page_list: [],
				// 主分页的页码
				main_page_pagination: {
					current: 1,
					pageSize: 10,
					total: 0
				},
			}
		},
		components: {
			layoutPreview,
		},
		computed: {
		},
		created() {
			this.currentChange(1);
		},
		methods: {
			copy(e) {
				this.$message.success("复制链接成功");
			},
			onError(e) {
				this.$message.error('复制失败');
			},
			choose(type, str) {
				if(str === 'page') {
					this.current_page_scene = type;
				}else {
					this.current_page_sort = type;
				}
			},
			toPage(item) {
				let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				// /admin/shop?c=site&a=entry&m=yun_shop&do=7900& 独立版
				// /web/index.php?c=site&a=entry&m=yun_shop&do=1333& 微擎版
				window.location.href = url + 'route=plugin.store-decorate.admin.page.detail&store_id='+this.fun.getKey('store_id')+'&i='+this.fun.getKeyByI()+'#/store_design?page_id='+item.id+'&page_sort='+ item.page_sort + '&page_scene=1';
				// this.$router.push(this.fun.getUrl("/design", {}, {page_id: item.id, page_sort: item.page_sort, page_scene: item.page_scene}));
			},
			showModal() {
				this.visible = true;
			},
			handleOk(e) {
				let url = window.location.href.substring(0,window.location.href.indexOf('route='));
				// /admin/shop?c=site&a=entry&m=yun_shop&do=7900& 独立版
				// /web/index.php?c=site&a=entry&m=yun_shop&do=1333& 微擎版
				window.location.href = url + 'route=plugin.store-decorate.admin.page.detail&store_id='+this.fun.getKey('store_id')+'&i='+this.fun.getKeyByI()+'#/store_design?page_sort='+this.current_page_sort + '&page_scene=' + this.current_page_scene;
				// this.$router.push(this.fun.getUrl("/design", {}, {page_sort: this.current_page_sort, page_scene: this.current_page_scene}));
				this.visible = false;
			},
			mouseenter(id) {
				this.mouse_hover_id = id;
			},
			onChange(checkedValues, record) {
				if(checkedValues[checkedValues.length-1] === '0') {
					record.page_type = ['0'];
				}else if(checkedValues.includes('0')){
					record.page_type = checkedValues.filter(function(item) {
						return item !== '0'
					});
				}else {
					record.page_type = checkedValues;
				}

				if(checkedValues.length <=0 ) {
					record.page_type = ['0'];
				}

				$http.post("plugin.store-decorate.admin.store-decorate.edit-decorate-type", { decorate_id: record.id,page_type: record.page_type.join(',') }, "loading").then(response => {
					if (response.result === 1) {
						this.currentChange(this.main_page_pagination.current);
						// this.$message.success("删除成功");
					} else {
						// if (response.msg) {
						// 	this.$message.error(response.msg);
						// }
					}
				}).catch(err => {
					console.log(err);
				});
				// console.log('checked = ', checkedValues, record);
			},
			handleChange(value) {
				this.currentChange(1);
			},
			/**
			 * 分页切换
			 */
			currentChange(page) {
				this.main_page_pagination.current = page;
				$http
						.post(
								"plugin.store-decorate.admin.store-decorate.get-list",
								{ page: page, page_name: this.page_name, page_sort: this.page_sort, page_scene: this.page_scene },
								"loading"
						)
						.then(response => {
							if (response.result === 1) {
								this.main_page_pagination.total = response.data.total;
								this.main_page_pagination.pageSize = response.data.per_page;
								this.main_page_list = response.data.data;
							} else {
								this.main_page_list = [];
								if (response.data.status === -1) {
									this.currentChange(1);
								}
								// this.$message.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},

			/**
			 * 删除页面
			 * @param {string} id 页面ID
			 */
			deleteIt(id) {
				const that = this;
				// 弹层
				this.$confirm({
					title: '确认删除该装修页面？',
					onOk() {
						$http.post("plugin.store-decorate.admin.store-decorate.del", { id: id }, "loading").then(response => {
							if (response.result === 1) {
								that.currentChange(that.main_page_pagination.current);
								that.$message.success("删除成功");
							} else {
								if (response.msg) {
									that.$message.error(response.msg);
								}
							}
						}).catch(err => {
							console.log(err);
						});
					}
				});

			},
			/**
			 * 复制页面
			 * @param {string} id 页面ID
			 */
			copyIt(id) {
				$http.post("plugin.store-decorate.admin.store-decorate.copy-page", { id: id }, "loading").then(response => {
					if (response.result === 1) {
						this.currentChange(this.main_page_pagination.current);
						this.$message.success("复制成功");
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			previewIt(id) {
				$http.post("plugin.store-decorate.admin.store-decorate.get-decorate", { decorate_id: id }, "loading").then(response => {
					if (response.result === 1) {
						this.previewData =  JSON.parse(response.data.datas).map(x => {
							return new Vdc({
								id : x.id,
								component_key : x.component_key,
								component_title : x.component_title,
								template_id : x.template_id,
								remote_data : x.remote_data,
								remote_style : {},
							})
						});
						this.previewVisible = true;
					} else {
						this.previewVisible = false;
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			close() {
				this.previewVisible = false;
			}
		}
	}
</script>

<style lang="less" scoped>
  #page-activity {
    padding: 30px 20px 20px 20px;
    position: relative;

  }

  .page-head {
    display: flex;
  }

  // 主活动列表(左侧)
  .main-page-list {
    width: 100%;
    margin-top: 15px;

    // 分页
    .ant-pagination {
      text-align: center;
      margin-top: 24px;
    }
  }

  .table-box {
    font-weight: bold;
  }

  .content-head {
    display: flex;
    margin-top: 15px;
    .left {
      position: relative;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      display: flex;
      align-self: center;
      justify-self: center;
      flex: 1;
    }
    .left::before {
      content: "";
      width: 5px;
      height: 25px;
      position: absolute;
      top: 0;
      left: -10px;
      background: #29ba9c;
    }
    .right {
      display: flex;
      align-self: center;
      justify-self: center;
      flex: 0 0 100px;
    }
  }

  .edit-box {
    display: flex;
    margin-right: 30px;
    i {
      flex: 1;
      color: #999999;
      margin-left: 15px;
      cursor: pointer;
    }
    i:hover {
      color: #ffa800;
    }
  }

  .type-box {
    display: flex;
    i {
      margin-left: 8px;
    }
  }

  .modal-box {
    font-weight: bold;
    margin-top: 10px;
    justify-self: center;
    align-self: center;
    .page-type-box {
      margin: 10px 0 0 30px;
      display: flex;
      flex-wrap: wrap;
      span {
        background: white;
        padding: 5px 20px;
        border-radius: 15px;
        cursor: pointer;
      }
      .active {
        background: #29ba9c;
        color: white;
        padding: 5px 20px;
        border-radius: 15px;
      }
    }
  }

</style>
